<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.min.js"></script>

</head>
<body>
<div id="app">
    <h2>我是主页面</h2>
    <router-link to="/index">返回首页</router-link>
    <router-link to="/user">用户页面</router-link>
    <router-view></router-view>
</div>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    let first = {
        template: `
        <div>这是首页</div>
        `
    }

    let second = {
        template: `
        <div>这是用户页面
        <table border="1">
        <tr>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>
        <tr v-for="user in users" :key="user.id">
            <td>{{user.id}}</td>
            <td>{{user.username}}</td>
            <td>{{user.age}}</td>
            <td>删除 | 更新</td>
        </tr>
        </table>
        </div>
        `,
        data() {
            return {
                users: [
                    {id: 1, username: '老千', age: 24},
                    {id: 2, username: 'U咩', age: 20},
                    {id: 3, username: '约定', age: 22},
                ]
            }
        },
    }

    let myRouter = new VueRouter({
        routes: [
            {path: '/index', component: first},
            {path: '/user', component: second},
            {path: '/', redirect: '/index'},
            {path: '/*', redirect: '/index'},
        ]
    })

    new Vue({
        el: '#app',
        data: {},
        router: myRouter
    })
</script>

</body>
</html>